<template>
  <div class="banner-management page-container">
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">Banner管理</h1>
        <p class="page-subtitle">
          管理首页轮播图和推广横幅，支持Banner的查看和预览操作
        </p>
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="goToAdd" class="add-btn">
          <svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
          </svg>
          新建Banner
        </el-button>
        <el-button type="info" @click="showPreviewDialog" class="preview-btn">
          <svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
            <path
              d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
            />
          </svg>
          预览效果
        </el-button>
      </div>
    </div>

    <div class="content-card">
      <div class="search-section">
        <el-input
          v-model="searchForm.name"
          placeholder="搜索Banner名称"
          class="search-input"
          clearable
        >
          <template #prefix>
            <svg class="search-icon" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
              />
            </svg>
          </template>
        </el-input>
        <el-select
          v-model="searchForm.status"
          placeholder="选择状态"
          clearable
          class="search-select"
        >
          <el-option label="全部" :value="null" />
          <el-option label="显示" :value="1" />
          <el-option label="隐藏" :value="0" />
        </el-select>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>

      <el-table
        :data="bannerList"
        style="width: 100%"
        class="banner-table"
        v-loading="loading"
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column label="Banner图片" width="200">
          <template #default="{ row }">
            <el-image
              :src="row.bannerImage"
              fit="cover"
              style="width: 120px; height: 60px; border-radius: 4px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="bannerName" label="Banner名称" />
        <el-table-column label="状态" width="120">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange(row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="spuId" label="关联商品ID" />
        <el-table-column prop="modifiedByName" label="修改人" />
        <el-table-column prop="modifiedTime" label="修改时间" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button
              size="small"
              type="primary"
              @click="editBanner(row)"
              class="action-btn"
            >
              编辑
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="deleteBanner(row)"
              class="action-btn"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 预览对话框 -->
    <div v-if="previewDialogVisible" class="preview-overlay">
      <div class="close-btn" @click="previewDialogVisible = false">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path
            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
          />
        </svg>
      </div>
      <div class="mobile-preview">
        <div class="phone-frame">
          <div class="phone-header">
            <div class="phone-notch"></div>
            <div class="phone-status-bar">
              <div class="status-left">
                <span class="time">9:41</span>
              </div>
              <div class="status-right">
                <div class="signal"></div>
                <div class="wifi"></div>
                <div class="battery"></div>
              </div>
            </div>
          </div>
          <div class="phone-screen">
            <div class="search-container">
              <div class="search-box">
                <svg
                  class="search-icon"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path
                    d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
                  />
                </svg>
                <input
                  type="text"
                  placeholder="搜索商品..."
                  class="search-input"
                />
              </div>
            </div>
            <div
              class="mobile-banner-carousel"
              v-if="previewBanners.length > 0"
            >
              <div class="carousel-container">
                <div
                  class="carousel-item"
                  v-for="(banner, index) in previewBanners"
                  :key="banner.id"
                  :class="{ active: currentBannerIndex === index }"
                >
                  <el-image
                    :src="banner.bannerImage"
                    fit="cover"
                    class="banner-image"
                  />
                  <div class="banner-overlay">
                    <h3 class="banner-title">{{ banner.bannerName }}</h3>
                  </div>
                </div>
              </div>
              <div class="carousel-indicators">
                <span
                  v-for="(banner, index) in previewBanners"
                  :key="banner.id"
                  class="indicator"
                  :class="{ active: currentBannerIndex === index }"
                  @click="setCurrentBanner(index)"
                ></span>
              </div>
              <div class="carousel-controls">
                <button class="control-btn prev" @click="prevBanner">
                  <svg viewBox="0 0 24 24" fill="currentColor">
                    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
                  </svg>
                </button>
                <button class="control-btn next" @click="nextBanner">
                  <svg viewBox="0 0 24 24" fill="currentColor">
                    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
                  </svg>
                </button>
              </div>
            </div>
            <div v-else class="no-banners">
              <svg
                class="no-banner-icon"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path
                  d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"
                />
              </svg>
              <p>暂无Banner数据</p>
            </div>
          </div>
          <div class="phone-home-indicator"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { postWithAuth } from "@/utils/request";

const router = useRouter();
const loading = ref(false);
const bannerList = ref<any[]>([]);

// 预览相关
const previewDialogVisible = ref(false);
const previewBanners = ref<any[]>([]);
const currentBannerIndex = ref(0);

const searchForm = reactive({
  name: "",
  status: null as number | null,
});

const fetchBannerList = async () => {
  loading.value = true;
  try {
    const params = { name: searchForm.name, status: searchForm.status };
    const response = await postWithAuth("/internal/banners/all", params);
    if (response.code === 0) {
      bannerList.value = response.data;
    } else {
      ElMessage.error(response.message || "获取Banner列表失败");
    }
  } catch (error) {
    ElMessage.error("获取Banner列表失败");
  } finally {
    loading.value = false;
  }
};

const handleSearch = () => fetchBannerList();
const handleReset = () => {
  searchForm.name = "";
  searchForm.status = null;
  fetchBannerList();
};

const handleStatusChange = async (row: any) => {
  try {
    const response = await postWithAuth(
      `/internal/banners/showOrHide/${row.id}`,
      {
        id: row.id,
      }
    );
    if (response.code === 0) {
      ElMessage.success("状态更新成功");
      fetchBannerList();
    } else {
      row.status = row.status === 1 ? 0 : 1;
      ElMessage.error(response.message || "状态更新失败");
    }
  } catch (error) {
    row.status = row.status === 1 ? 0 : 1;
    ElMessage.error("状态更新失败");
  }
};

// 预览相关函数
const showPreviewDialog = async () => {
  try {
    const response = await postWithAuth("/internal/banners/all", {});
    if (response.code === 0) {
      previewBanners.value = response.data.filter(
        (banner: any) => banner.status === 1
      );
      currentBannerIndex.value = 0;
      previewDialogVisible.value = true;
    } else {
      ElMessage.error(response.message || "获取Banner数据失败");
    }
  } catch (error) {
    console.error("获取Banner数据失败:", error);
    ElMessage.error("获取Banner数据失败");
  }
};

const setCurrentBanner = (index: number) => {
  currentBannerIndex.value = index;
};

const prevBanner = () => {
  if (previewBanners.value.length > 0) {
    currentBannerIndex.value =
      currentBannerIndex.value > 0
        ? currentBannerIndex.value - 1
        : previewBanners.value.length - 1;
  }
};

const nextBanner = () => {
  if (previewBanners.value.length > 0) {
    currentBannerIndex.value =
      currentBannerIndex.value < previewBanners.value.length - 1
        ? currentBannerIndex.value + 1
        : 0;
  }
};

const goToAdd = () => {
  router.push("/banner-add");
};

// 编辑Banner
const editBanner = (row: any) => {
  router.push(`/banner-edit/${row.id}`);
};

// 删除Banner
const deleteBanner = async (row: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除Banner "${row.bannerName}" 吗？`,
      "确认删除",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    );

    const response = await postWithAuth(
      `/internal/banners/delete/${row.id}`,
      {}
    );
    if (response.code === 0) {
      ElMessage.success("Banner删除成功");
      fetchBannerList();
    } else {
      ElMessage.error(response.message || "删除失败");
    }
  } catch (error) {
    if (error !== "cancel") {
      console.error("删除Banner失败:", error);
      ElMessage.error("删除Banner失败");
    }
  }
};

onMounted(() => {
  fetchBannerList();
});
</script>

<style scoped>
.banner-management {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-content {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #2d3748;
  margin: 0 0 8px 0;
}

.page-subtitle {
  color: #718096;
  margin: 0;
  font-size: 16px;
}

.content-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.search-section {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  width: 250px;
}

.search-select {
  width: 200px;
}

.search-icon {
  width: 16px;
  height: 16px;
  color: #909399;
}

.banner-table {
  margin: 0;
  padding-left: 20px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.preview-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-weight: 500;
}

.btn-icon {
  width: 16px;
  height: 16px;
}

.action-btn {
  margin-right: 8px;
}

.action-btn:last-child {
  margin-right: 0;
}

/* 预览对话框样式 */
.preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.close-btn svg {
  width: 24px;
  height: 24px;
  color: white;
}

.mobile-preview {
  display: flex;
  justify-content: center;
  padding: 0;
  background: transparent;
}

.phone-frame {
  width: 320px;
  height: 640px;
  background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
  border-radius: 35px;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  border: 3px solid #333;
}

.phone-header {
  height: 50px;
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.phone-notch {
  width: 70px;
  height: 15px;
  background: #000;
  border-radius: 8px;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.phone-status-bar {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 11px;
  z-index: 10;
}

.status-left {
  display: flex;
  align-items: center;
}

.time {
  font-weight: bold;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.signal,
.wifi,
.battery {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #fff;
}

.signal {
  background-color: #42b983;
}

.wifi {
  background-color: #42b983;
}

.battery {
  background-color: #42b983;
}

.phone-screen {
  width: 100%;
  height: calc(100% - 70px);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 0;
}

.search-container {
  width: 100%;
  padding: 15px 20px 10px 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  background-color: #f0f2f5;
  border-radius: 0;
  margin-bottom: 0;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 20px;
  padding: 8px 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 220px;
}

.search-input {
  border: none;
  outline: none;
  flex: 1;
  padding: 4px 10px;
  font-size: 13px;
  color: #333;
  background: transparent;
}

.search-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  color: #909399;
}

.mobile-banner-carousel {
  width: 280px;
  height: 93px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.05);
  margin-top: 12px;
}

.carousel-container {
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.carousel-item.active {
  opacity: 1;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  padding: 8px;
  color: white;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.banner-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.carousel-indicators {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
}

.indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: white;
  transform: scale(1.2);
}

.carousel-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
}

.control-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.control-btn:hover {
  background: white;
  transform: scale(1.1);
}

.control-btn svg {
  width: 14px;
  height: 14px;
}

.no-banners {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 83px;
  color: #999;
  text-align: center;
  padding: 10px;
}

.no-banner-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.phone-home-indicator {
  width: 100%;
  height: 20px;
  background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.phone-home-indicator::before {
  content: "";
  width: 30px;
  height: 3px;
  background: #666;
  border-radius: 2px;
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .search-section {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input,
  .search-select {
    width: 100%;
  }

  .preview-container {
    height: 300px;
  }
}
</style>
